<div class="email-toolbar" [ngClass]="{'mobile-email-toolbar': isMobileView}">
    <div class="container column-boxes sws-divider overflow-hidden">
        <div class="row " style="padding: 4px;">
            <div class="col col-lg-12 col-xl-6 one-column flex-center" (click)="onOneClick()">
                <div class="icon-box">
                    <div class="p-3 col-custom-border"></div>
                    <span class="icon-text">One Column</span>
                </div>
            </div>
            <div class="col col-lg-12 col-xl-6 two-column flex-center" (click)="onTwoClick()">
                <div class="icon-box">
                    <div class="p-3 col-custom-border">
                        <div class="splitter"></div>
                    </div>
                    <span class="icon-text">Two Columns</span>
                </div>
            </div>
        </div>
        <button *ngIf="isMobileView" class="close-btn" (click)="closeSidebar($event)">
            &#xD7;
        </button>
    </div>

    <div class="container action-list_types sws-divider text-center">
        <div class="row row-cols-2 row-cols-lg-3 g-3 g-lg-3">
            <div class="col icon-box" (click)="onTextClick()">
                <i class="icon fa-solid fa-heading"></i>
                <h6 class="icon-text">Heading Text</h6>
            </div>
            <div class="col icon-box" (click)="onBodyTextClick()">
                <i class="icon fa-solid fa-align-justify"></i>
                <h6 class="icon-text">Body Text</h6>
            </div>

            <div class="col icon-box" (click)="onImageClick()">
                <i class="icon fa-solid fa-image"></i>
                <h6 class="icon-text">Image</h6>
            </div>

            <div class="col icon-box" (click)="onVideoClick()">
                <i class="icon fa-solid fa-video"></i>
                <h6 class="icon-text">Video</h6>
            </div>

            <div class="col icon-box" (click)="onButtonClick()">
                <i class="icon fa-solid fa-ticket-simple"></i>
                <h6 class="icon-text">Button</h6>
            </div>

            <div class="col icon-box" (click)="onDividerClick()">
                <i class="icon fa-solid fa-minus"></i>
                <h6 class="icon-text">Divider</h6>
            </div>
        </div>
    </div>

    <div class="bg-content-warpper sws-divider">
        <div class="container bgColor-container mt-3">
            <div class="row gx-0 sws-border">
                <span class="header-text">
                    <h4>Background Color</h4>
                </span>
                <div class="col-sm-12">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Background Color"
                            [(ngModel)]="bgPickerValue" value="{{bgPickerValue}}" (ngModelChange)="updateBgColor()">
                        <span class="color-picker-wrapper input-group-text">
                            <input type="color" class="form-control" value="{{bgPickerValue}}"
                                [(ngModel)]="bgPickerValue" (ngModelChange)="updateBgColor()">
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="container contentBg-container mt-3 mb-3">
            <div class="row gx-0 sws-border">
                <span class="header-text">
                    <h4> Content Background Color</h4>
                </span>
                <div class="col-sm-12">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Content Background Color"
                            [(ngModel)]="contentBgValue" value="{{contentBgValue}}"
                            (ngModelChange)="updateContentBgColor()">
                        <span class="color-picker-wrapper input-group-text">
                            <input type="color" id="colorPicker" class="form-control" [(ngModel)]="contentBgValue"
                                value="{{contentBgValue}}" (ngModelChange)="updateContentBgColor()">
                        </span>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <ng-container *ngIf="!logoSelected;else logoContainer">

        <div class="container headingTxt-container mt-3" *ngIf="selectedBType === blockType.Text && !isFooterVisible">
            <app-email-content-editor [bodyType]="selectedBType" [sIndex]="selectedSIindex" [cIndex]="selectedCindex"
                [bIndex]="selectedBIndex" [content]="headerContent"
                [selectedBlock]="selectedBlock"></app-email-content-editor>
        </div>

        <div class="container mt-3" *ngIf="selectedBType === blockType.Body && !isFooterVisible">
            <app-email-content-editor [sIndex]="selectedSIindex" [cIndex]="selectedCindex" [bIndex]="selectedBIndex"
                [content]="bodyContent" [bodyType]="selectedBType"></app-email-content-editor>
        </div>

        <div class="container mt-3 image-upload-wrapper" *ngIf="selectedBType === blockType.Image && !isFooterVisible">
            <div class="row gx-0 sws-border">
                <span class="header-text">
                    <h4>Image</h4>
                </span>
                <div class="col-sm-12">
                    <div class="image-upload-content icon-box" (click)="imageSelectionTrigger()">
                        <i class="icon fa-solid fa-upload"></i>
                        <span class="icon-text image_limit">Upload Image (Max 2 MB)</span>
                    </div>
                </div>
            </div>
            <div class="row gx-0">
                <p class="my-2 text-center text-color">Or</p>
                <div class="form-group mt-2 position-relative image-link sws-border">
                    <input type="text" class="form-control" id="linkInput" [(ngModel)]="imageUrl"
                        placeholder="Image Url">
                    <span class="play-icon" (click)="changeImageUrl()">
                        <i class="fa-solid fa-floppy-disk"></i>
                    </span>
                </div>
                <div class="form-group mt-2 position-relative image-link sws-border">
                    <input type="text" class="form-control" id="linkInput" [(ngModel)]="imageLink"
                        placeholder="Link to open on clicking image">
                    <span class="play-icon" (click)="changeImageLink()">
                        <i class="fa-solid fa-floppy-disk"></i>
                    </span>
                </div>

                <div class="form-group mt-2 position-relative image-link sws-border">
                    <input type="text" class="form-control" id="altInput" [(ngModel)]="imageAltTxt"
                        placeholder="Alt text tag">
                    <span class="play-icon" (click)="changeImageAltTxt()">
                        <i class="fa-solid fa-floppy-disk"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="container video-contaner mt-3" *ngIf="selectedBType == blockType.Video && !isFooterVisible">
            <div class="row gx-0 sws-border">
                <span class="header-text">
                    <h4>Video</h4>
                </span>
                <div class="col-sm-12">
                    <div class="position-relative">
                        <input type="text" class="form-control" [(ngModel)]="videoUrl"
                            placeholder="Youtube or Vimeo URL">
                        <span class="play-icon" (click)="getVideoData()">
                            <i class="fa-solid fa-floppy-disk"></i>
                        </span>
                    </div>
                </div>

                <div class="form-group mt-2 position-relative image-link sws-border">
                    <input type="text" class="form-control" id="altVideoInput" [(ngModel)]="imageAltTxt"
                        placeholder="Alt text tag">
                    <span class="play-icon" (click)="changeVideoImageAltTxt()">
                        <i class="fa-solid fa-floppy-disk"></i>
                    </span>
                </div>
            </div>
        </div>
        <div class="container btn-contaner mt-3" *ngIf="selectedBType == blockType.Button && !isFooterVisible">
            <app-email-toolbar-button [sIndex]="selectedSIindex" [cIndex]="selectedCindex" [bIndex]="selectedBIndex"
                [btnBgColorValue]="btnBgColorValue" [btnTxtColorValue]="btnTxtColorValue"
                [btnTextContent]="btnTextContent" [btnLink]="btnLink" [selectedFont]="fontName"
                [selectedFontSize]="fontSizeCount" [currentAlignment]="btnAlign">
            </app-email-toolbar-button>
        </div>

        <div class="container divider-contaner mt-3" *ngIf="selectedBType == blockType.Divider && !isFooterVisible">

            <div class="row gx-0">
                <div class="col-sm-12 header-text">
                    <h4>Divider Background Color </h4>
                </div>
                <div class="col-sm-12">
                    <div class="input-group">
                        <input type="text" class="form-control" placeholder="Divide Background Color"
                            [(ngModel)]="dividerBgClrValue" value="{{dividerBgClrValue}}"
                            (ngModelChange)="dividerBgChange()">
                        <span class="color-picker-wrapper input-group-text">
                            <input type="color" class="form-control" value="{{dividerBgClrValue}}"
                                [(ngModel)]="dividerBgClrValue" (ngModelChange)="dividerBgChange()">
                        </span>
                    </div>
                </div>
            </div>
        </div>

        <div class="footer-container" *ngIf="isFooterVisible">
            <div class="container mt-3">
                <app-email-toolbar-footer [sIndex]="selectedSIindex" [cIndex]="selectedCindex" [bIndex]="selectedBIndex"
                    [footerContent]="footerContent" [selectedBrands]="selectedBrands" [footer]="footer"
                    [includeUnsubscribe]="includeUnsubscribe" [unsubscribeColor]="unsubscribeColor"
                    (imageUploadTriggered)="onImageUploadTrigger($event)" #toolbarFooter></app-email-toolbar-footer>
            </div>
        </div>
    </ng-container>

    <ng-template #logoContainer>
        <div class="container mt-3 image-upload-wrapper logo-Container">
            <div class="row gx-0 sws-border">
                <div class="col-sm-12 logo header-text">
                    Logo
                    <span class="icons-container">
                        <i class="aln-icon fas fa-align-left" (click)="alignText(logoAlignment.Left)"
                            [class.selected]="(currentLogoAlignment=== logoAlignment.Left)"></i>
                        <i class="aln-icon fas fa-align-center" (click)="alignText(logoAlignment.Center)"
                            [class.selected]="(currentLogoAlignment=== logoAlignment.Center)"></i>
                        <i class="aln-icon fas fa-align-right" (click)="alignText(logoAlignment.Right)"
                            [class.selected]="(currentLogoAlignment=== logoAlignment.Right)"></i>
                    </span>
                </div>

                <div class="col-sm-12 logo-radio-wrapper">
                    <div *ngFor="let size of logoSizesData" class="form-check form-check-inline">
                        <input class="form-check-input" type="radio" name="sizeRadio" [id]="size.id"
                            [value]="size.value" (change)="logoResize(size.value)"
                            [checked]="(selectedSize === size.value)"
                            [disabled]="(originalWidth <= size.minWidth) || imageSrcStatus" />
                        <label class="form-check-label" [for]="size.id"
                            [ngClass]="{'label-name': ((originalWidth <= size.minWidth) || imageSrcStatus)}">
                            {{size.label }}
                        </label>
                    </div>
                </div>

                <div class="col-sm-12">
                    <div class="image-upload-content icon-box" (click)="imageSelectionTrigger(true)">
                        <i class="icon fa-solid fa-upload"></i>
                        <span class="icon-text image_limit">Upload Image (Max 2 MB)</span>
                    </div>
                </div>
            </div>
            <div class="row gx-0">
                <div class="form-group mt-3 position-relative image-link sws-border">
                    <input type="text" class="form-control" id="linkInput" [(ngModel)]="imageLink"
                        placeholder="Link to open on clicking image">
                    <span class="play-icon" (click)="updateLogoLink()">
                        <i class="fa-solid fa-floppy-disk"></i>
                    </span>
                </div>
            </div>

            <div class="form-group mt-2 position-relative image-link sws-border">
                <input type="text" class="form-control" id="altLogoInput" [(ngModel)]="imageAltTxt" placeholder="Alt text tag">
                <span class="play-icon" (click)="updateLogoAltTxt()">
                    <i class="fa-solid fa-floppy-disk"></i>
                </span>
            </div>
        </div>
    </ng-template>
    <div style="height: 146px;">
    </div>
</div>